<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- <span>word</span> hello {{arr}} world
    <ul>
      <li>{{name}}</li>
    </ul> -->
    <div id="app" a="1" style="color: red; background: green">
      ddd
      <my-button></my-button>
    </div>
    <script src="dist/vue.js"></script>
    <script>
      Vue.component("my-button", {
        template: "<button>global button</button>",
      });
      let vm = new Vue({
        components: {
          "my-button": {
            template: "<button>options button</button>",
          },
        },
        el: "#app",
        data() {
          return {};
        },
      });
      // 1. 先给组件创建一个构造函数， 基于Vue
      // 2. 开始生产虚拟节点，对组件进行特殊处理data.hook = {init(){}}
      // 3. 生产dom元素，如果当前虚拟节点上有hook.init属性，说明是组件
      // 4. 对组件进行new组件().$mount() => vm.$el
      // 5. 将组件$el 插入到父容器上
    </script>
  </body>
</html>
